import React, { Component } from 'react'
import apiServe from '../../api/apiServer'
import './index.scss'
import { Swiper } from 'antd-mobile'
import { https } from '../../api/apiServer'
// 引入组件
import Navtaber from '../../components/Navtaber'
export default class HouseInfo extends Component {
	state = {
		info: {},
		houseImglist: [],
		issc: false,
		code: '',
	}
	// 实例挂载
	componentWillMount() {
		let code = this.props.location.state.code
		this.getHouseInfolist(code)
	}
	// 获取房屋信息
	getHouseInfolist = async code => {
		let res = await apiServe.gethouseInof(code)
		// 获取房屋是否授权
		let res2 = await apiServe.gethousesc(code)
		this.setState({
			info: res.body,
			houseImglist: res.body.houseImg,
			issc: res2.body.isFavorite,
			code,
		})
	}
	// 点击收藏房屋
    getCollection =async () => {
        const { code, issc } = this.state
        if (issc) {
            let res = await apiServe.getdelete(code)
			if (res.status === 200) {
				this.getHouseInfolist(code)
			}
        } else {
            let res = await apiServe.getCollection(code)
			if (res.status === 200) {
				this.getHouseInfolist(code)
			}
        }

	}
	render() {
		return (
			<div className='housepage'>
				{/* 头部导航 */}
				<Navtaber title={'房屋详情'} />
				{/* 轮播图 */}
				<div className='swiper'>
					<Swiper autoplay>
						{this.state.houseImglist.map((item, index) => {
							return (
								<Swiper.Item key={index}>
									<div className='itemImg'>
										<img src={`${https}${item}`} alt='' />
									</div>
								</Swiper.Item>
							)
						})}
					</Swiper>
				</div>
				{/* 简介 */}
				<div className='infohouse'>
					{/* title1 */}
					<div className='info1'>
						<p>{this.state.info.title}</p>
						<span>{this.state.info.tags}</span>
					</div>
					<div className='info2'>
						<div className='info2-item'>
							<span>{this.state.info.price}元/月</span>
							<span>租金</span>
						</div>
						<div className='info2-item'>
							<span>{this.state.info.roomType}</span>
							<span>房型</span>
						</div>
						<div className='info2-item'>
							<span>{this.state.info.size}</span>
							<span>面积</span>
						</div>
					</div>
					<div className='info3'>
						<div className='info3-item'>
							<span>装修：</span>精装
						</div>
						<div className='info3-item'>
							<span>朝向：</span>金装
						</div>
						<div className='info3-item'>
							<span>楼层：</span>
							{this.state.info.floor}
						</div>
						<div className='info3-item'>
							<span>类型：</span>普通住宅
						</div>
					</div>
				</div>
				{/* 底部功能区 */}
				<div className='footer-fixed'>
					<div className='footer-item' onClick={this.getCollection}>
						<img src={https + (this.state.issc ? '/img/star.png' : '/img/unstar.png')} alt='收藏' />
						{this.state.issc ? '已收藏' : '收藏'}
					</div>
					<div className='footer-item'>在线咨询</div>
					<div className='footer-item blud'>电话预约</div>
				</div>
			</div>
		)
	}
}
